/*
 * @Author: LGX
 * @Date: 2022-04-06 22:36:07
 * @LastEditors: LGX
 * @LastEditTime: 2022-04-11 20:48:18
 * @FilePath: \erp-management-system\src\components\customerseas\UserInfoModal.jsx
 * @Description: 查看客户信息Modal框
 * 
 */
import React, { useState } from 'react'
import { Modal, Tabs, Button, Space, Table, Tag } from 'antd';
import CustomerAdd from '../../views/seas/CustomerAdd'
import DescriptionsInfo from './DescriptionsInfo'
import MyButton from './MyButton'
const { TabPane } = Tabs;

function callback(key) {
    console.log(key);
}
export default function UserInfoModal(props) {
    //修改modal框状态
    const [isUpdateModal, setUpdateModal] = useState(false);
    const { userInfo, isUserModal, setUserModal } = props
    console.log(userInfo);
    //修改信息modal框
    const handleOkUpdateInfo = () => {
        setUpdateModal(false);

    };

    const handleUpdateInfo = () => {
        setUpdateModal(false);
    };
    const columns = [
        {
            title: '数据表',
            dataIndex: 'name',
        },
        {
            title: '行为',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '备注',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '操作员',
            key: 'tags',
            dataIndex: 'tags',
        },
        {
            title: '时间',
            key: 'action',
            render: () => {
                return <a>2022-07-01</a>
            }
        },
    ];
    const data = [
        {
            key: '1',
            name: '公海列表',
            age: '增加',
            address: '无',
            tags: '超级管理员'
        },
        {
            key: '2',
            name: '公海列表',
            age: '增加',
            address: '无',
            tags: '超级管理员'
        },
        {
            key: '3',
            name: '公海列表',
            age: '增加',
            address: '无',
            tags: '超级管理员'
        }
    ];
    return (
        <Modal
            title="查看" visible={isUserModal}
            centered
            footer={null}
            onCancel={() => setUserModal(false)}
            okText="修改" cancelText='退出'
            bodyStyle={{ height: window.innerHeight * 0.7, overflowY: 'scroll', position: 'relative' }}
            width={window.innerWidth * 0.8}>
            <span>客户编号：{userInfo.id}</span>
            <Tabs defaultActiveKey="1" onChange={callback}>
                {/* 基本资料 */}
                <TabPane tab="基本资料" key="1">
                    {/* 基本信息展示列表 */}
                    <DescriptionsInfo userInfo={userInfo} />
                    {/* 修改modal框 */}
                    <Modal
                        title="修改" visible={isUpdateModal}
                        centered
                        onOk={handleOkUpdateInfo} onCancel={handleUpdateInfo}
                        okText="修改" cancelText='退出'
                        bodyStyle={{ height: window.innerHeight * 0.5, overflowY: 'scroll'}}
                        width={window.innerWidth * 0.6}>
                        <CustomerAdd status={userInfo} setUpdateModal={setUpdateModal} />
                    </Modal>
                    <div style={{ position: 'fixed', bottom: '15%', left: '45%' }}>
                        <MyButton size='large' onClick={() => setUpdateModal(true)} color="#448aca" title="修改"></MyButton>
                    </div>

                </TabPane>
                {/* 附件管理 */}
                <TabPane tab="附件管理(1)" key="2">
                    Content of Tab Pane 2
                </TabPane>
                {/* 客户共享页 */}
                <TabPane tab="客户共享" key="3">
                    <Space style={{ position: 'fixed', bottom: '20%', left: '45%' }}>
                        <MyButton size='large' onClick={() => setUpdateModal(true)} color="#448aca" title="保存"></MyButton>
                        <MyButton size='large' onClick={() => setUserModal(false)} color="#505050" title="关闭"></MyButton>
                    </Space>

                </TabPane>
                {/* 操作记录页 */}
                <TabPane tab="操作记录" key="4">
                    <Table columns={columns} dataSource={data} pagination={false} />,
                    <div style={{ position: 'fixed', bottom: '20%', left: '45%' }}>
                        <MyButton size='large' onClick={() => setUpdateModal(true)} color="#505050" title="关闭" />
                    </div>
                </TabPane>
            </Tabs>

            {/* <Button style={{ position: 'fixed', bottom: '20%', left: '45%', height: '40px', lineHeight: '40px', borderTop: '1px dashed gray', backgroundColor: 'red', zIndex: '99' }} type="primary" size='large'>修改</Button> */}
        </Modal>
    )
}
